<template>
	<view>
		<view class="dhl" style="background-color: #7ADEEC;"></view>
		<view class="topbar box dis_f_c_c" style="background-color: #7ADEEC;">
				动态详情
		<image  class="top_jt" src="../../static/icon/back.png" mode="aspectFit" @click="go_back"></image>
		</view>
		<view class="content dis_f_co">
			<view class="dt_xq dis_f_co" >
				<view class="dis_f_sb_c" style="margin-bottom: 28rpx;">
					<view class="dis_f_l_c" @click="gogeren(quan.user.id)" >
						<view class="tx">
							<image class="tx_img" :src="quan.user.avatar" mode=""></image>
							<image class="sex" :src="sex_src" mode=""></image>
						</view>
						<view class="dis_f_co">
							<view class="title">{{quan.user.name}}</view>
							<view class="sign">{{quan.user.sign}}</view>
						</view>
					</view>
					<view class="gz_btn dis_f_c_c" v-if="quan.follow == 1 && (quan.uid != uid)" @click="follow(quan.user.id)">已关注</view>
					<view class="gz_btn dis_f_c_c" v-if="quan.follow == 0 && (quan.uid != uid)" @click="follow(quan.user.id)">关注</view>
					<!-- <view class="gz_btn dis_f_c_c" v-else @click="follow(quan.user.id)">关注</view> -->
					<!-- <view class="gz_btn dis_f_c_c" v-if="(quan.uid != uid)" @click="follow(quan.user.id)">关注</view> -->
				</view>
				<view style="font-size: 22rpx;margin-bottom: 24rpx;" class="hh">{{quan.content}}</view>
				<view class="dis_f_l_c dis_f_w img_list">
					<image v-for="(item,index) in quan.pic" :src="item" mode="" @click.stop="previewOpen(item)" v-if="quan.type ==0 ||quan.type ==1"></image>
					<video v-if="quan.type ==2" style="border-radius: 20rpx;z-index: 2;" :autoplay="false" :src="quan.pic[0]" :show-fullscreen-btn="true">
					</video>
				</view>
				<view class="dis_f_l_c b_btn">
					<view class="dis_f_l_c" style="margin-right: 60rpx;">
						<image  src="../../static/guang_chang/sl.png" mode="" @click.stop="go_lt(quan.user.id)" v-if="quan.uid != uid"></image>
						<view style="color: #7ADEEC;">私聊</view>
					</view>
					<view class="dis_f_l_c" style="margin-right: 60rpx;">
						<image  src="../../static/index/s_btn2.png" mode=""></image>
						<view>{{quan.talknum}}</view>
					</view>
					<view class="dis_f_l_c" style="margin-right: 60rpx;" @click="love(quan.id)">
						<image v-if="quan.zans == 1" src="../../static/index/hx.png" mode=""></image>
						<image v-else src="../../static/index/s_btn4.png" mode=""></image>
						<view>{{quan.zan}}</view>
					</view>
				</view>
			</view>
			<view class="ping_lun dis_f_co">
				<view class="size_22 font_bold c_2">全部评论({{quan.talknum}})</view>
				<view class="list dis_f_l_c" v-for="(items,indexs) in quan.talk">
					<image class="tx" :src="items.user.avatar" mode=""></image>
					<view class="dis_f_co size_22"  style="width: calc(100% - 116rpx);">
						<view class="dis_f_sb_c">
							<view class="dis_f_co">
								<view class="c_7">{{items.user.name}}</view>
								<view class="c_b">{{items.create_time}}</view>
								<view class="c_2">{{items.remark}}</view>
							</view>
							<view>
								<view @click="zan(items)">
									<view v-if="items.zanes == 1" style="color: #E23C63;">
										<image class="zan" :src="items.src" mode="" ></image>
										{{items.zan}}
									</view>
									<view v-else>
										<image class="zan" :src="items.src" mode="" ></image>
										{{items.zan}}
									</view>
								</view>
								<view v-if="items.del_true" @click="del_talk(items.id)" style="margin-top: 14rpx;">
									删除
								</view>
							</view>
						</view>
						
					</view>
				</view>
			</view>
			<view class="ping_lun dis_f_co" style="margin-top: 10rpx;">
				<view class="size_22 font_bold c_2">全部礼物({{quan.giftnum}})</view>
				<view class="list dis_f_l_c" v-for="(itemes,indexs) in quan.gift">
					<image class="tx" :src="itemes.gifts.filepath" mode=""></image>
					<view class="dis_f_co size_22"  style="width: calc(100% - 116rpx);">
						<view class="dis_f_sb_c">
							<view class="dis_f_co">
								<view class="c_7">{{itemes.user.name}}({{itemes.gifts.name}})</view>
								<view class="c_b">{{itemes.create_time}}</view>
								<view class="c_2">￥{{itemes.gifts.money}}</view>
							</view>
							<!-- <view class="dis_f_l_c" @click="zan(items)">
								<image class="zan" :src="items.src" mode="" ></image>
								<view v-if="items.zanes == 1" style="color: #E23C63;">{{items.zan}}</view>
								<view v-else>{{items.zan}}</view>
							</view> -->
						</view>
						
					</view>
				</view>
			</view>
		</view>
		<view class="pl_btn dis_f">
			<image src="../../static/xuan_shang/shang.png" mode="" @click="gift_show =true"></image>
			<image src="../../static/icon/pinglun.png" mode="" @click="go_pl"></image>
		</view>
		<u-popup v-model="show" v-if="show" mode="bottom" width="600" height="100">
			<view class="t_c dis_f_l_c box">
				<u-input v-model="text" placeholder="请输入评论"></u-input>
				<view class="btns dis_f_c_c" @click="pinglun">评论</view>
			</view>
		</u-popup>
		<u-popup v-model="gift_show" v-if="gift_show" mode="center" width="584" height="754" border-radius="20">
			<view class="gift dis_f_co_c_c box">
				<image class="gift_tx" :src="quan.user.avatar" mode=""></image>
				<view style="margin-bottom: 22rpx;">赠送礼物</view>
				<view style="width: 100%;padding: 0 42rpx;">
					<swiper :indicator-dots="true" :autoplay="false" :interval="3000" :duration="1000" >
						<swiper-item v-for="(item,index) in row">
							<view class="dis_f_sb_c dis_f_w" >
								<view class="dis_f_co_c_c" v-for="(item2,index2) in gift" @click='xuanzhong(item2)' style="margin-bottom: 24rpx;width: 25%;">
									<image class="gift_item" :src="item2.thumb" mode=""></image>
									<view style="font-size: 28rpx;line-height: 40rpx;color: #777777;">{{item2.name}}</view>
									<view style="font-size: 18rpx;line-height: 26rpx;color: #BBBBBB;">{{item2.money}}</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="dis_f_sa_c" style="width: 100%;">
					<view class="gift_btn dis_f_c_c" style="background-color: #BBBBBB;" @click="gift_show = false">取消</view>
					<view class="gift_btn dis_f_c_c" style="background-color: #E23C63;" @click="givegift">发送<span v-if = 'checkname !=""'>({{checkname}})</span></view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				quan:[],
				sex_src:'',
				text:'',
				show:false,
				pl_list:[{
					username:'用户1',
					time:'08-18',
					text:'评论1',
					zan:true,
					num:1
				},
				{
					username:'用户2',
					time:'08-18',
					text:'评论2',
					zan:false,
					num:0
				}],
				
				zan_sty:{
					color:'#E23C63'
				},
				gift:[],
				uid:0,
				id:0,
				row:1,
				gift_show:false,
				checkname:'',
				checkid:'',
				checknum:0
			};
		},
		onLoad(e) {
			this.uid = uni.getStorageSync('uid')
			this.id = e.id
			this.getgift()
			this.get_userinfo()
			
		
		},
		methods:{
			go_lt(e){
			    let  toUserInfo = {
			     userId:''
			    }
			    toUserInfo.userId = e
				console.log(toUserInfo.userId)
			    // this.$store.commit('createConversationActive', e)
			    this.$store.commit('createConversationActive', toUserInfo.userId)
			    console.log(this.$store.state.conversationActive)
			    uni.navigateTo({
			     url: './chat'
			    })
			   },
			givegift(){
				this.$.ajax(1, 'post', 'index/setgift', {
					uid:uni.getStorageSync('uid'),
					id:this.quan.user.id,
					gift:this.checkid,
					token:uni.getStorageSync('token'),
					num:this.checknum,
					cid:this.id
				}, (res) => {
					console.log(res)
					if(res.code == 1){
						this.$.ti_shi(res.msg)
						this.gift_show = false
						this.get_userinfo()
						// this.quan = res.list[0]
						// this.quan.talk.forEach((item,key) => {
							// if(item.zan == 1){
							// 	item.src = '../../static/icon/zan2.png'
							// }
							// if(item.zan == 0){
							// 	item.src = '../../static/icon/zan.png'
							// }
						// })
					}else{
						this.$.ti_shi(res.msg)
					}
				})
			},
			xuanzhong(e){
				this.checkname = e.name
				this.checkid = e.id
				this.checknum = e.money
			},
			getgift(){
				this.$.ajax(1, 'post', 'index/getgift', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token'),
				}, (res) => {
					console.log(res)
					if(res.code == 1){
						this.gift = res.gift
						this.row = res.rol
						console.log(this.gift )
						// this.quan = res.list[0]
						// this.quan.talk.forEach((item,key) => {
							// if(item.zan == 1){
							// 	item.src = '../../static/icon/zan2.png'
							// }
							// if(item.zan == 0){
							// 	item.src = '../../static/icon/zan.png'
							// }
						// })
					}
				})
			},
			follow(e){
				this.$.ajax(1, 'post', 'index/checktokens', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token')
				}, (res) => {
					console.log(res)
					if(res.code == 9){
						this.$.ti_shi('token已过期，请重新登陆')
					uni.clearStorageSync()
						setTimeout( () => {
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}, 1000)
					return;
					}
					else{
					this.$.ajax(1, 'post', 'index/setfollow', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token'),
					id:e
				}, (res) => {
					console.log(res)
					if(res.code == 1){
						this.$.ti_shi(res.msg)
						this.get_userinfo()
						// this.quan = res.list[0]
						// this.quan.talk.forEach((item,key) => {
							// if(item.zan == 1){
							// 	item.src = '../../static/icon/zan2.png'
							// }
							// if(item.zan == 0){
							// 	item.src = '../../static/icon/zan.png'
							// }
						// })
					}
				})
					}
				})
				
			},
			love(e){
				this.$.ajax(1, 'post', 'index/checktokens', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token')
				}, (res) => {
					console.log(res)
					if(res.code == 9){
						this.$.ti_shi('token已过期，请重新登陆')
					uni.clearStorageSync()
						setTimeout( () => {
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}, 1000)
					return;
					}
					else{
					this.$.ajax(1, 'post', 'index/setquanlove', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token'),
					id:e
				}, (res) => {
					console.log(res)
					if(res.code == 1){
						this.quan.zan = this.quan.zan+1
						this.get_userinfo()
					}else{
						this.quan.zan = this.quan.zan-1
						this.get_userinfo()
					}
				})
					}
				})
				
			},
			get_userinfo(){
				this.$.ajax(1, 'post', 'index/getquan', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token'),
					id:this.id
				}, (res) => {
					console.log(res)
					if(res.code == 1){
						this.quan = res.list[0]
						// this.quan.talk.forEach((item,key) => {
							// if(item.zan == 1){
							// 	item.src = '../../static/icon/zan2.png'
							// }
							// if(item.zan == 0){
							// 	item.src = '../../static/icon/zan.png'
							// }
						// })
					}
				})
				// let sex = 1
				// if(sex == 1){
				// 	this.sex_src = '../../static/mine/man.png'
				// }
				// if(sex == 0){
				// 	this.sex_src = '../../static/mine/women.png'
				// }
			},
			//打开预览e
			previewOpen(e) {
				// console.log(e)
				this.$.look_img(e, this.quan.pic)
			
			},
			zan(e){
				this.$.ajax(1, 'post', 'index/checktokens', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token')
				}, (res) => {
					console.log(res)
					if(res.code == 9){
						this.$.ti_shi('token已过期，请重新登陆')
					uni.clearStorageSync()
						setTimeout( () => {
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}, 1000)
					return;
					}
					else{
					this.$.ajax(1, 'post', 'index/settalkzan', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token'),
					id:e.id
				}, (res) => {
					console.log(res)
					this.get_userinfo()
				})
				if(e.zanes == 1){
					console.log(e)
					e.zanes =0
					e.zan =e.zan-1
					e.src = '../../static/icon/zan.png'
					
				}
				else if(e.zanes == 0){
					e.zanes =1
					e.zan =e.zan  + 1
					e.src = '../../static/icon/zan2.png'
				}
					}
				})
				
			},
			pinglun(){
				this.$.ajax(1, 'post', 'index/checktokens', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token')
				}, (res) => {
					console.log(res)
					if(res.code == 9){
						this.$.ti_shi('token已过期，请重新登陆')
					uni.clearStorageSync()
						setTimeout( () => {
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}, 1000)
					return;
					}
					else{
					this.$.ajax(1, 'post', 'index/settalk', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token'),
					remark:this.text,
					cate:1,
					id:this.quan.id
				}, (res) => {
					console.log(res)
					if(res.code == 1){
						this.text = ''
						this.show = false
						this.get_userinfo();
					}else{
						this.$.ti_shi(res.msg)
					}
					
				})
					}
				})
				
			},
			del_talk(id) {
				this.$.ajax(1, 'post', 'index/checktokens', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token')
				}, (res) => {
					console.log(res)
					if(res.code == 9){
						this.$.ti_shi('token已过期，请重新登陆')
						uni.clearStorageSync()
							setTimeout( () => {
								uni.navigateTo({
									url:'/pages/login/login'
								})
							}, 1000)
						return;
					}else{
						this.$.ajax(1, 'post', 'index/del_quan_talk', {
							uid:uni.getStorageSync('uid'),
							token:uni.getStorageSync('token'),
							id:id
						}, (res) => {
							console.log(res)
							if(res.code == 1){
								this.get_userinfo();
							}else{
								this.$.ti_shi(res.msg)
							}
						})
					}
				})
			},
			go_pl(){
				this.$.ajax(1, 'post', 'index/checktokens', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token')
				}, (res) => {
					console.log(res)
					if(res.code == 9){
						this.$.ti_shi('token已过期，请重新登陆')
					uni.clearStorageSync()
						setTimeout( () => {
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}, 1000)
					return;
					}
					else{
						this.show = true
					}
				})
				
				
			},
			gogeren(e)
			{
				this.$.open('/pages/mine/gr_zy?uid='+e)
			},			// 返回
			go_back() {
				this.$.back()
			},
		}
	}
</script>

<style lang="scss">
	.gift{
		width: 584rpx;
		height: 754rpx;
		.gift_tx{
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin-bottom: 24rpx;
		}
		.gift_item{
			width: 53.44rpx;
			height: 41.75rpx;
			margin-bottom: 12rpx;
		}
		.gift_btn{
			width: 214rpx;
			height: 72rpx;
			color: #fff;
			border-radius: 36rpx;
		}
	}
	.dhl {
		// position: absolute;
		width: 100%;
		height: var(--status-bar-height);
		position: fixed;
		top: 0;
		z-index: 999;
	}
	.topbar {
		width: 100%;
		z-index: 999;
		height: 88rpx;
		position: fixed;
		top: var(--status-bar-height);
		font-size: 34rpx;
		color: #212730;
		font-weight: bold;
		// background-image: url(../../static/index/bg.png);
		// padding: 0 0 26rpx 0rpx;
		
		.top_jt {
			width: 18rpx;
			height: 32rpx;
			position: absolute;
			left: 40rpx;
			top: 28rpx;
		}
	}
	.t_c{
		padding: 0 24rpx;
		width: 100%;
		height: 100rpx;
		background-color: #f6f6f6;
		.btns{
			margin-left: 12rpx;
			width: 86rpx;
			height: 46rpx;
			background-color: #2979ff;
			color: #fff;
			border-radius: 10rpx;
		}
	}
	.pl_btn{
		position: fixed;
		bottom: 90rpx;
		right: 24rpx;
		image{
			width: 66rpx;
			height: 66rpx;
			margin-right: 24rpx;
		}
		
	}
	.pl_btn image:last-child{
			width: 138rpx;
	}
	.content{
		width: 100%;
		padding: calc(var(--status-bar-height) + 128rpx) 24rpx 0 24rpx;
		.ping_lun{
			
			width: 100%;
			padding: 36rpx 24rpx;
			border-radius: 20rpx;
			box-shadow: 0rpx 6rpx 24rpx rgba(34, 34, 34, 0.05);
			background-color: #fff;
			.list{
				.zan{
					width: 28.6rpx;
					height: 28.6rpx;
					margin-right: 12rpx;
				}
				padding: 26rpx 0;
				width: 100%;
				border-bottom: 2rpx solid #EEE;
				.tx{
					width: 56rpx;
					height: 56rpx;
					border-radius: 50%;
					margin-right: 12rpx;
				}
			}
		}
		.dt_xq{
			width: 100%;
			padding: 36rpx 24rpx;
			background-color: #fff;
			margin-bottom: 12rpx;
			border-radius: 20rpx;
			box-shadow: 0rpx 6rpx 24rpx rgba(34, 34, 34, 0.05);
			.tx{
				width: 76rpx;
				height: 76rpx;
				margin-right: 24rpx;
				position: relative;
				.tx_img{
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
				.sex{
					position: absolute;
					bottom: 0;
					right: 0;
					width: 30rpx;
					height: 30rpx;
				}
			}
			.img_list{
				width: 100%;
				margin-bottom: 50rpx;
				image{
					width: 204rpx;
					height: 204rpx;
					border-radius: 10rpx;
					margin-bottom: 10rpx;
					margin-right: 10rpx;
				}
			}
			.title{
				font-size: 28rpx;
				line-height: 40rpx;
				margin-bottom: 6rpx;
			}
			.sign{
				font-size: 22rpx;
				color: #BBB;
			}
			.gz_btn{
				width: 108rpx;
				height: 48rpx;
				background-color: #E23C63;
				border-radius: 28rpx;
				font-size: 22rpx;
				color: #fff;
			}
			.b_btn{
				font-size: 22rpx;
				line-height: 32rpx;
				color: #777;
				image{
					margin-right: 12rpx;
					width: 37.13rpx;
					height: 32.88rpx;
				}
			}
		}
	}
</style>
